<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网易云音乐</title>
		<link rel="stylesheet" type="text/css" href="css/download.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link
		type="image/icon"
		rel="icon"
		href="../ico/wyy.ico"
	/>
	</head>
	<body>
		<header>
			<div id="h_top" class="pos">
				<a href="javascript:void(0)" id="cloud_music" class="block center abs">
					<img src="img/header/cloudMusic_img.png" >网易云音乐
				</a>
				<ul id="ul_top" class="inblock cl">
					<li class="left"><a href="../cloudMusic/cloudMusic.html" target="_self" class="f14 txt-center block">发现音乐</a></li>
					<li class="left"><a href="../myMusic/myMusic.html" target="_self" class="f14 txt-center block">我的音乐</a></li>
					<li class="left"><a href="../musicFriend/musicFriend.html" target="_self" class="f14 txt-center block">朋友</a></li>
					<li class="left"><a href="../musicStore/musicStore.html" target="_blank" class="f14 txt-center block">商城</a></li>
					<li class="left"><a href="#" class="f14 txt-center block">音乐人</a></li>
					<li class="left pos"><a href="#" class="f14 txt-center block">下载客户端</a><span class="abs txt-center block">HOT</span>
						<img src="img/header/red_tip.png" class="abs">
					</li>
					<form action="" method="post">
						<input type="text" name="search" id="sch" class="abs" value="" placeholder="音乐/视频/电台/用户"/>
					</form>
					<a href="../autherCenter/autherCenter.html" target="_blank" id="auther_center" class="abs txt-center f12">创作者中心</a>
					<a href="#" id="loading" class="abs decoration f12">登陆</a>
				</ul>
			</div>
			<div id="row"></div>
		</header>
		
		<section>
			<div id="content">
				<!-- 固定二维码设置 -->
				<div id="QRcode" class="txt-center f12">
					<img src="./img/section/QRcode.jpeg" />
					<p class="mtm f12">扫描二维码下载</p>
				</div>
				<!-- 下载面 -->
				<!-- 第一行 -->
				<div id="outer" class="pos frist-row">
					<div id="inner">
						<!-- 电脑端下载 -->
						<div id="listen-pc" class="inblock txt-center">
							<div class="f22 txt-center">在电脑上听</div>
							<img src="./img/section/pc.jpg"/>
							<div>
								<span class="txt-center f16">
									<img src="./img/section/x.png" class="mrm" />macOS
								</span>
								<span class="txt-center f16 mlv">
									<img src="./img/section/surface.png" class="mrm" />Windows
								</span>
							</div>
							<div id="pc-download">
								<a href="#" class="block f22 txt-center">下载电脑端</a>
							</div>
						</div>
						<!-- 手机版下载 -->
						<div id="listen-phone" class="inblock txt-center pos">
							<div class="f22 txt-center">在手机上听</div>
							<img src="./img/section/phone.jpg" />
							<div>
								<span class="txt-center f16">
									<img src="./img/section/iphone.png" class="mrm"/>iPhone
								</span>
								<span class="txt-center f16 mlv">
									<img src="./img/section/Android.png" class="mrm"/>Android
								</span>
							</div>
							<div id="phone-download">
								<a href="#" class="block f22 txt-center">
									<i class="inblock"></i>
									下载手机端
								</a>
							</div>
						</div>
					</div>
				</div>
				
				<!-- 千万乐库，首首CD音质 -->
				<!-- 第二行 -->
				<div  class="model-first second-row">
					<div  class="modelFrist-cont cl">
						<div class="left mlv">
							<h3>千万乐库 首首CD音质</h3>
							<span class="f16">
								囊括百万无损SQ音乐，你在用手机听歌时，<br/>
								也能感受到纤毫毕现的CD音质，更能免费离线收听
							</span>
						</div>
						<div class="right">
							<img src="./img/section/second.jpg"/>
						</div>
					</div>
				</div>
				
				<!-- 千位明星 亲自推荐音乐 -->
				<!-- 第三行 -->
				<div class="model-first add_bkColor third-row">
					<div class="cl modelFrist-cont">
						<div class="left">
							<img src="./img/section/three.jpg" />
						</div>
						<div class="right f16">
							<h3>千位明星 亲自推荐音乐</h3>
							<span>
								陶喆，羽泉等<em>千位明星已入住</em>，亲自创建私房歌单，录制独<br/>
								家DJ节目，推荐他们心中的好音乐
							</span>
						</div>
					</div>
				</div>
				
				<!-- 社交关系 发现全新音乐 -->
				<!-- 第四行 -->
				<div class="model-first four-row">
					<div class="modelFrist-cont cl">
						<div class="left">
							<h3>社交关系 发现全新音乐</h3>
							<span class="f16">
								你可以<em>关注明星</em>、DJ和好友，通过浏览他们的动态、收藏和<br/>
								分享，发现更多全新好音乐
							</span>
						</div>
						<div class="right">
							<img src="./img/section/109951164206408352.jpg"/>
						</div>
					</div>
				</div>
				
				<!-- 听歌识曲 祝你疯狂猜歌 -->
				<!-- 第五行 -->
				<div class="model-first add_bkColor five-row">
					<div class="cl modelFrist-cont">
						<div class="left">
							<img src="./img/section/109951164206417003.jpg" />
						</div>
						<div class="right f16">
							<h3>听歌识曲 祝你疯狂猜歌</h3>
							<span>
								歌声很动听却不知道歌名，革命在嘴边却想不起来……<br/>
								用<em>听歌识曲</em>功能，几秒钟就知道歌名
							</span>
						</div>
					</div>
				</div>
				
				<!-- 社交关系 发现全新音乐 -->
				<!-- 第六行 -->
				<div class="model-first six-row">
					<div class="modelFrist-cont cl">
						<div class="left">
							<h3>社交关系 发现全新音乐</h3>
							<span class="f16">
								你可以<em>关注明星</em>、DJ和好友，通过浏览他们的动态、收藏和<br/>
								分享，发现更多全新好音乐
							</span>
						</div>
						<div class="right">
							<img src="./img/section/109951164206408352.jpg"/>
						</div>
					</div>
				</div>
			</div>
		</section>
		
		
		<footer>
			<div id="conten" class="pos">
				<ul id="conten-help" class="abs cl wpn">
					<li class="left"><a href="#" class="f12 block txt-center">服务条款</a></li>
					<li class="left"><a href="#" class="f12 block txt-center">隐私政策</a></li>
					<li class="left"><a href="#" class="f12 block txt-center">儿童隐私政策</a></li>
					<li class="left"><a href="#" class="f12 block txt-center">版权投诉指引</a></li>
					<li class="left"><a href="#" class="f12 block txt-center">意见反馈</a></li>
				</ul><br>
				<p id="company-infor">网易公司版权所有©1997-2019&emsp;杭州乐读科技有限公司运营：浙网文[2018]3506-263号</p>
				<p id="call">违法和不良信息举报电话：0571-89853516&emsp;举报邮箱：ncm5990@163.com</p>
				<ul id="icon" class="abs cl">
					<li class="left txt-center"><a href="#"><img src="img/footer/user.png">用户认证</a></li>
					<li class="left txt-center"><a href="#"><img src="img/footer/person-music.png">独立音乐人</a></li>
					<li class="left txt-center"><a href="#"><img src="img/footer/admire.png">赞赏</a></li>
					<li class="left txt-center"><a href="#"><img src="img/footer/video-reward.png">视频奖励</a></li>
				</ul>
			</div>
			
			<div id="video">
				<!-- 最右侧钥匙部分 -->
				<div id="vi-key" class="abs bkground-video">
					<a id="key" class="pos bkground-video block" href="javascript:void(0)"></a>
				</div>
				<!-- 中心部分按钮 -->
				<div id="vi-center" class="left mtm pos cl">
					<!-- 上下暂停播放按钮 -->
					<div id="btns" class="left">
						<a href="#" class="bkground-video block mtm left" id="previous" title="上一曲"></a>
						<a href="#" class="bkground-video block mtn left mln" id="stop" title="暂停"></a>
						<a href="#" class="bkground-video block mtm left mln" id="next" title="下一曲"></a>
					</div>
					<div id="music-pic">
						<img src="img/footer/music-pic.jpg" class="abs">
						<a href="#" class="abs block bkground-video"></a>
					</div>
					<!-- 进度条设置 -->
					<div id="play" class="" class="pos">
						<div id="space"></div>
						<div class="pos">
							<div id="bar" class="pos"></div>
							<span id="bar-pic" class="abs bkground-iconall pos"></span>
						</div>
						<!-- 进度时间 -->
						<span id="time" class="abs">
							<em>00:00</em>
							/ 00:00
						</span>
					</div>
					<!-- 文档和分享按钮 -->
					<div id="doc-share" class="abs cl">
						<a href="#" id="doc" class="bkground-video left"></a>
						<a href="#" id="share" class="bkground-video left"></a>
					</div>
					<!-- 其他三个按钮 -->
					<div id="other" class="abs bkground-iconall cl">
						<a href="#" id="voice" class="left bkground-video"></a>
						<a href="#" id="change" class="left bkground-video" title="循环"></a>
						<a href="#" id="doc-stop" class="left bkground-video block txt-center decoration mtm" title="播放列表">0</a>
					</div>
				</div>
				
			</div>
		</footer>
	</body>
</html>
